<template>
  <header>
    <div class="container">
      <div class="info">
        <div class="avatars">
          <img :src="getAdmin.photo" alt />
        </div>
        <div class="name">深的个人博客</div>
      </div>
      <div class="module">
        <ul>
          <li>
            <router-link to="/main" tag="span">
              <span class="iconfont icon-zhuye"></span>
              <span>主页</span>
            </router-link>
          </li>
          <li>
            <router-link to="/module/message" tag="span">
              <span class="iconfont icon-liuyan"></span>
              <span>留言</span>
            </router-link>
          </li>
          <li>
            <router-link to="/module/archive" tag="span">
              <span class="iconfont icon-guidang"></span>
              <span>归档</span>
            </router-link>
          </li>
          <li class="tongji">
            <router-link to="/statistical" tag="span">
              <span class="iconfont icon-tj"></span>
              <span>统计</span>
            </router-link>
          </li>
          <li class="tongji">
            <span @click="goChat">
              <span class="iconfont icon-liaotian"></span>
              <span>chat</span>
            </span>
          </li>
          <li>
            <router-link to="/musichome" tag="span">
              <span class="iconfont icon-baseline-library_mus"></span>
              <span>音乐</span>
            </router-link>
          </li>
        </ul>
      </div>

      <div class="login">
        <div class="search">
          <search :position="position"></search>
        </div>
        <div class="backend" @click="handleLogin">
          <span class="iconfont icon-houtai"></span>
        </div>
        <div class="exit" @click="handleCancellation" v-if="getIsLogin">
          <span class="iconfont icon-tuichu"></span>
        </div>
      </div>
    </div>
  </header>
</template>
<script>
import Search from '../../../components/search/Search'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      position: 'right'
    }
  },
  computed: {
    ...mapGetters(['getAdmin', 'getToken', 'getIsLogin', 'getUser'])
  },
  components: {
    Search
  },
  methods: {
    goChat() {
      if (this.getToken) {
        this.$router.push('/chatroom')
      } else {
        this.$router.push('/chat_login')
      }
    },
    // 后台管理
    handleLogin() {
      if (this.getIsLogin) {
        if (this.getUser.isAdmin) {
          this.$router.push('/backend')
        } else {
          this.$notify({
            title: '提示',
            message: '您不是管理员，无法访问网站后台',
            type: 'warning'
          })
        }
      } else {
        this.$router.push('/login')
      }
    },
    // 注销
    handleCancellation() {
      this.$confirm('您确定退出登录', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          window.localStorage.removeItem('blogToken')
          this.$store.commit('changeIsLogin', false)
          this.$store.dispatch('SOCKET_LOGOUT') // 注销socket.io的登陆状态
          if (this.$route.path != '/home') {
            this.$router.push('/main/home')
          }
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../../scss/common.scss';
header {
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #ddd;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  background: white;
  padding: 0px 10px;
  .container {
    width: 100%;
    max-width: 1400px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    .info {
      height: 100%;
      display: flex;
      .avatars {
        height: 60px;
        width: 60px;
        padding: 7px 14px 7px 0px;
        box-sizing: border-box;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 5px;
        }
      }
      .name {
        height: 60px;
        line-height: 60px;
        font-size: 24px;
        font-weight: bold;
      }
    }
    .module {
      height: 100%;
      flex: auto;
      padding-left: 40px;
      ul {
        display: flex;
        li {
          height: 60px;
          line-height: 60px;
          list-style: none;
          padding: 0px 10px;
          transition: 0.5s;
          span {
            display: inline-block;
            height: 100%;
            color: rgb(112, 111, 111);
            font-size: 16px;
            transition: 0.5s;
          }
          span:nth-child(1) {
            padding-right: 5px;
          }
        }
        li:hover {
          cursor: pointer;
        }
        li:hover span {
          color: $ar_color;
        }
      }
    }
    .search {
      height: 60px;
      line-height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 40px;
    }
    .login {
      display: flex;
      align-items: center;
      .backend {
        display: inline-block;
        position: relative;
        width: 40px;
        height: 40px;
        background: $ar_color;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-content: center;
        .icon-houtai {
          color: white;
          font-size: 20px;
          transform: translateY(10px);
        }
      }
      .backend:hover {
        cursor: pointer;
      }
      .exit:hover {
        cursor: pointer;
      }
      .exit {
        margin-left: 10px;
        display: inline-block;
        position: relative;
        margin-right: 5px;
        width: 40px;
        height: 40px;
        background: $ar_color;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-content: center;
        .icon-tuichu {
          color: white;
          font-size: 20px;
          transform: translateY(10px);
        }
      }
    }
  }
}
@media (max-width: 600px) {
  header {
    // display: none;
    padding: 0px 10px;
    .info {
      padding-left: 0px !important;
    }
    .search {
      display: none !important;
    }
    .module {
      display: none;
    }
  }
}
</style>
